import React, { FC, useState } from 'react'
import { Affix, Button, Space } from 'antd';
import { AppstoreOutlined } from '@ant-design/icons';
import classNames from 'classnames';


/**
 * 设计页通用头部
 * @returns 
 * style={{ fontSize: 20, color: '#52c41a' }}
 */
const DesignHeader: FC = () => {
    const [affixed, setAffixed] = useState<boolean | undefined>(false);
    const [spin, setSpin] = useState<boolean>(true);
    const onChange = (affixed?: boolean) => {
        setAffixed(affixed);
    }
    return (
        <Affix onChange={onChange}>
            <div className={classNames({
                'design-header': true,
                affixed
            })}>
                <div className='main-menu' onMouseOver={() => setSpin(false)} onMouseLeave={() => setSpin(true)}>
                    <AppstoreOutlined spin={spin} className='menu-icon' />  素材分类
                </div>
                <div className='vip-btn'>
                    <Button type="text" className='nav-button'> VIP专享 </Button>
                </div>
                <div className='normal-menu'>
                    <Space >
                        <Button className='nav-button' type="text" >发现</Button>
                        <Button className='nav-button' type="text" >素材专辑</Button>
                        <Button className='nav-button' type="text" >VIP会员</Button>
                    </Space>
                </div>
                <div className='user-panel'>
                    <Button type='primary' ghost>登录/注册</Button>
                </div>
            </div>
        </Affix>
    )
}


export default DesignHeader;
